<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        父组件给子组件传值 :
          父组件在调用子组件的地方添加一个自定义的属性,属性值就是传递给子组件的值,如果属性值是一个变量/boolean/number , 需要使用绑定属性
          在子组件定义的地方添加一个props选项,props选项的值有三种书写形式
            1.书写形式为数组: 数组的元素为自定义属性名.可以使用自定义的属性名渲染数据
            2.书写形式为对象: 对象的key值为自定义的属性名,value值为数据类型.可以使用自定义的属性名渲染数据
            3.书写形式为对象: 对象的key值为自定义的属性名,value值又为一个对象,可以基于此对象设置type为数据类型,设置default为默认值,设置require为必传值,如果默认值为数组或对象,使用函数返回即可.可以使用自定义的属性名渲染数据
    -->
    <div id="app">
       <my-parent></my-parent>
    </div>
</body>
<template id="parent">
    <div>父组件
        <my-child money='100' :age='23' :msg="msg"></my-child> <!-- 父组件在调用子组件的地方添加一个自定义属性,属性值就是传递给子组件的值 -->
        <my-child money='100'></my-child> <!-- 再调用一次子组件,不传值时都为默认的,没有定义默认值的为空 -->
    </div> 
</template>
<template id="child">
    <div>子组件
        <h3>我是子组件,我拿到了父组件的值{{money}} -- {{age}}--{{msg}} --{{list}}</h3>
    </div>
</template>
<script>
    const Child={
        template:'#child',
        // 第一种书写形式
        // props:['money','age','msg']

        // 第二种书写形式:好处是可以检测到传递的参数数据类型,不一致时会报警告信息
        // props:{ 
        //   money:String,
        //   age:Number,
        //   msg:String,
        // }

        // 第三种书写形式
        props:{
            money:{
                type:String,
                default:'300', // 如果money没有传时,默认为'300'
                require:true // 表示必传
            },
            age:{
                type:Number,
                default:24
            },
            msg:String, // 第二种书写形式和第三种可以混用
            list:{
                type:Array,
                default(){ // 如果默认值为数组或对象,需要使用函数返回
                    return [6,7,8]
                }
            }

        }
    }
    const Parent={
        template:'#parent',
        data(){
            return {
                msg:"父组件中的一条数据"
            }
        },
        components:{
            'my-child':Child
        }
    }
    new Vue({
        el:"#app",
        components:{
            'my-parent':Parent
        }
    })
</script>
</html>